<div id="breadcrumb">
    <a onclick="javascript:history.go(-1);" class="go-to-home tip-bottom font font18" style="cursor: pointer;">
        <i class="icon-arrow-left"></i> 返回 &nbsp;
    </a> 
    <a onclick="javascript:history.go(-1);" class="font font18" style="cursor: pointer;"> &nbsp;&nbsp;<span>收益结算 &gt</span></a>
    <a onclick="javascript:history.go(-1);" class="font font18" style="cursor: pointer;"> <span>待结算&gt</span></a>
    <a href="#" class="current font font18"> <span>详情</span></a>
    {#{ info|json_encode }#}
</div>

<!--sidebar-menu-->
<div id="sidebar" class="clearfix">
    <div class="user-info" style="text-align:left;position: relative;margin: 30px;">
        <div class="l-row">
            <p class="lable font font16 cr-b9">申请人:</p>
            <p class="font font16">{{info['applyUser']}}</p>
        </div>
        <div class="l-row">
            <p class="lable font font16 cr-b9">申请时间:</p>
            <p class="font font16">{{info['createTime']}}</p>
        </div>
        <div class="l-row">
            <p class="lable font font16 cr-b9">申请结算人数:</p>
            <p class="font font16">{{info['peopleNum']}}</p>
        </div>
        <div class="l-row">
            <p class="lable font font16 cr-b9">总金额（人民币）:</p>
            <p class="font font16">{{info['rmb']}}</p>
        </div>

    </div>

</div>
<!--end sidebar-menu-->

     <div id="content">
        <div class="row-fluid" style="margin-top: 40px;">
            <div class="span12">
                <div class="content-box" style="background: #FFF; text-align: left;  padding-bottom: 40px;">
                    <div class="row-fluid" style="margin-top: 20px;">
                        <div class="container-fluid">
                            <input id="settledid" type="hidden" value="{{info['id']}}">
                            <table id="tableList" class="table with-check table-purple">
                                <thead>
                                <tr>
                                    <th>结算对象</th>
                                    <th>银行账户</th>
                                    <th>结算金额（人民币）</th>
                                    <th>底薪</th>
                                    <th>转账凭证</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <!--<td>-->
                                        <!--<div class="th-header clearfix" style="width: 200px;margin: 0 auto;">-->
                                            <!--<img style="width: 50px;height: 50px;border-radius: 50px;" class="pull-left" src="/web/img/91ns/u75.jpg">-->
                                            <!--<div class="th-h-text pull-left">-->
                                                <!--<p><span>主播号:</span><span>3</span></p>-->
                                                <!--<p><span>昵称：</span><span>111</span></p>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                    <!--</td>-->
                                    <!--<td>-->
                                        <!--<p><span>哈时候覅哦</span></p>-->
                                        <!--<p><span>111sfsdgsdgsgdsgsd</span></p>-->
                                    <!--</td>-->
                                    <!--<td>-->
                                        <!--fjsjfojsaiof-->
                                    <!--</td>-->
                                    <!--<td>-->
                                        <!--<img style="width: 100px;height: 50px;" src="/web/img/91ns/u75.jpg">-->
                                    <!--</td>-->

                                </tr>


                                </tbody>
                            </table>

                            {% include "common/pagination.html" %}

                        </div>

                    </div>


                </div>
            </div>

        </div>

    </div>

</div>


<div id="clearingDialog" style="display: none;">
    <form id="clearingFrom" action="" enctype="multipart/form-data" method="post">

        <input name="file_upload"  type="file" id="localfile" size="28" style="margin-top: 30px;margin-left: 45px;"/>
        <input id="stid" name="id"  type="hidden" value="" />
        <input  name="upload"  type="hidden" value="1" />

        <!--以下是预览图片用的-->
        <!--<div id="kk">
            <div id="preview_wrapper">
                <div id="preview_fake">
                    <img id="preview" src="" onload="onPreviewLoad(this)"/>
                </div>
            </div>
            <br/>
            <img id="preview_size_fake" />-->

        <div class="row-fluid" style="text-align: center;margin-bottom: 20px;margin-top: 40px;">
            <button id="btn_applysellte" type="submit" class="btn btn-purple" style="margin-right: 20px">结算</button>
        </div>
    </form>
</div>

<script type="text/javascript">

    $(function() {
        $('body').addClass('anchorinfo');

        getDataList();

    });

    function getDataList(index){
        var data={};
        data.id=$('#settledid').val();
        data.page=index||1;
        data.pageSize=global.pageSize;
        $.ajax({
            type:"POST",
            data:data,
            url:'/ajax/getSettleInfo',
            dataType:'json',
            success:function(res){
                var data=res.data;
                var tableList=document.getElementById("tableList");
                var tbody= tableList.getElementsByTagName('tbody')[0];
                dataTable.clearData(tbody);

                var count=document.getElementById('count');
                count.innerHTML=data.count;

                for(var i=0;i<data.list.length;i++){
                    addRow(tbody,data.list[i]);
                }
                if(!index||index==0){
                    utilsPagination("#pagination",data.count,global.pageSize,function(page_index,jq){
                        page_index+=1;
                        getDataList(page_index);
                    });
                }
            }

        });
    }

    function addRow(table,data){

        var row=table.insertRow();
        var cell=row.insertCell(0);
        var cell1=row.insertCell(1);
        var cell2=row.insertCell(2);
        var cell3=row.insertCell(3);
        var cell4=row.insertCell(4);

        var html='<div class="th-header clearfix" style="width: 200px;margin: 0 auto;">';
        html+='<img style="width: 50px;height: 50px;border-radius: 50px;" class="pull-left" src="'+data.logo+'">';
        html+='<div class="th-h-text pull-left"><p><span></span><span>'+data.uid+'</span></p>';
        html+='<p><span></span><span>'+data.name+'</span></p></div></div>';

        cell.innerHTML=html;
        cell1.innerHTML='<p><span>'+data.accountName+'</span></p><p><span>'+data.cardNumber+'</span></p>';
        cell2.innerHTML=data.rmb;
        cell3.innerHTML=data.basicSalary;
        if(data.status==0){
            var a = document.createElement("a");
            a.innerHTML = "结算";
            a.btn=data.id;
            a.className = "a-edit font font18 cr-pe cursor-pointer";
            utils.addEvent(a,'click',clearingDialog);
            cell4.appendChild(a);

        }else if(data.status==1) {
            cell4.innerHTML = data.auditImg == null ? '' : '<img style="width: 100px;height: 50px;" src="' + data.auditImg + '">';
        }
        return row;
    }


    function clearingDialog(){
        var id=this.btn;
        $('#clearingDialog').dialog({
            autoOpen:true,
            width:345,
            height:250,
            title:'结算',
            resizable:false,
            modal:true,
            open:function(){
                $('#stid').val(id);
            },
            buttons: {
                /*"确定": function () {

                }*///,
                /*"取消": function () {


                 }*/
            }
        });
    }


    function onUploadImgChange(sender){
        if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
            alert('图片格式无效！');
            return false;
        }
        var objPreview = document.getElementById('preview');
        var objPreviewFake = document.getElementById('preview_fake');
        var objPreviewSizeFake = document.getElementById('preview_size_fake');
        if( sender.files &&  sender.files[0] ){
            objPreview.style.display = 'block';
            objPreview.style.width = 'auto';
            objPreview.style.height = 'auto';

            // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
            objPreview.src = sender.files[0].getAsDataURL();
        }else if( objPreviewFake.filters ){
            // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
            //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决

            // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
            sender.select();
            sender.blur();
            var imgSrc = document.selection.createRange().text;
            objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
            objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
            alert("已成功选择图片！");
            autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );
            objPreview.style.display = 'none';
        }
    }
</script>